<!-- 添加设备 -->
<template>
	<view class="pageview flex">
		<view class="menu">
			<scroll-view scroll-y scroll-with-animation v-if="proTypelist.length > 0">
				<view
					v-for="(item, index) in proTypelist"
					:key="index"
					class="tab-bar-item flex align-center"
					:class="[currentTab == index ? 'active' : '', { prev: index == currentTab - 1, next: index == currentTab + 1 }]"
					@tap.stop="swichNav(index)"
				>
					<view class="name">
						{{ item.prodTypeName }}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-sub tab-view">
			<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
				<view class="devicelist flex justify-between flex-wrap">
					<view class="item" v-for="(item, index) in deviceTypelist" :key="index" @tap="bindDevice(item)">
						<view class="imgbox">
							<image :src="item.imgUrl" mode="aspectFit"></image>
						</view>
						<view>{{ item.deviceTypeName }}</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			proTypelist: [],
			deviceTypelist: [],
			currentTab: 0
		};
	},
	created() {
		this.getProTypeList();
	},
	methods: {
		getProTypeList() {
			this.$postAction(this.$deviceapi.getProTypeList, {}).then(res => {
				this.proTypelist = [{ prodTypeName: '全部产品', prodTypeId: '' }, ...res];
				this.getDeviceTypeList();
			});
		},
		getDeviceTypeList() {
			let param = {};
			if (this.currentTab > 0) {
				param.prodTypeId = this.proTypelist[this.currentTab].prodTypeId;
			}
			this.$postAction(this.$deviceapi.getDeviceTypeList, param).then(res => {
				if (res && res.length > 0) {
					this.deviceTypelist = res.map(item => {
						return {
							...item,
							imgUrl: this.filterUrl + item.imgUrl.split(';')[0]
						};
					});
				}
			});
		},
		swichNav(index) {
			if (this.currentTab != index) {
				this.currentTab = index;
				this.getDeviceTypeList();
			}
		},
		bindDevice(device) {
			let path = '';
			switch (device.deviceTypeCode) {
				case 'O2Max':
				case 'O2Ring': {
					path = '/pages/device/o2device';
					break;
				}
				case 'BP2A': {
					path = '/pages/device/bp2device';
					break;
				}
				case 'F2Pro': {
					path = '/pages/device/f2device';
					break;
				}
				case 'ER': {
					path = '/pages/device/erdevice';
					break;
				}
			}
			this.$Router.push({
				path: path + '?deviceType=' + device.deviceTypeCode + '&deviceTypeId=' + device.deviceTypeId
			});
		}
	}
};
</script>

<style scoped lang="scss">
.menu {
	height: 100vh;
	width: 172upx;
	overflow: auto;
	text-align: center;
	border-radius: 0 12upx 0 0;
	background: #f6f6f6;
	.tab-bar-item {
		background: #f6f6f6;
		color: #666;
		font-size: 28upx;
		font-weight: 400;
		text-align: center;
		margin: 0 auto;
		padding: 28upx 6upx 28upx 32upx;

		.icon {
			width: 32upx;
			height: 32upx;
			vertical-align: middle;
			margin-top: -6upx;
		}

		.name {
			width: 4em;
			position: relative;

			.tag {
				position: absolute;
				top: -20upx;
				right: -20upx;
			}
		}
		&.prev {
			border-radius: 0 0 20upx 0;
		}
		&.next {
			border-radius: 0 20upx 0 0;
		}
		&.active {
			color: #1c1c1e;
			background: #fff;
			font-weight: 500;
			position: relative;
			border-radius: 0px;

			&::after {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				content: '';
				width: 6upx;
				border-radius: 0px 20px 20px 0px;
				background: var(--nav-bg);
			}
		}
	}
}

.tab-view {
	/* height: 100vh; */
	overflow: auto;
	// background: #fff;

	.devicelist {
		margin-top: 16upx;
		padding: 20upx 20upx 0;
	}
	.item {
		width: calc(50% - 10upx);
		background: #fff;
		border-radius: 20upx;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
		padding: 20upx;
		text-align: center;
		margin-bottom: 20upx;
		font-size: 24upx;
		.imgbox {
			width: 140upx;
			height: 140upx;
			margin: 0 auto;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
